<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


<title>My JSP 'operate.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/style/css/amazeui.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/style/css/app.css">
<link
	href="${pageContext.request.contextPath}/style/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath}/style/layui/css/layui.css"
	rel="stylesheet">
<script src="${pageContext.request.contextPath}/style/js/jquery.min.js"></script>
<script
	src="${pageContext.request.contextPath}/style/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/style/js/amazeui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
<style type="text/css">
label {
	font-family: "Times New Roman", Times, serif;
	font-size: 15px;
	color: #000000;
}

th {
	text-align: center;
}
</style>



</head>

<body>
	<div
		style="width:100%;background-color:#F8F8FF;height:100%;position: absolute;top:1px;left:1px">
		<div id="searchdiv"
			style="border:1px solid #96c2f1;background:#eff7ff;height:12%;width:100%;position: absolute;top:15px;left:15px">
			<div class="row" style="position: relative;left:8px;top:15px">
				<form id="searchform">
					<div class="col-xs-1" style="text-align:right;line-height:25px">
						<label for="operateRnid">编号</label>
					</div>
					<div class="col-xs-2"
						style="text-align:left;padding:0px; margin:0px;">
						<input name="operateRnid" id="operateRnid" type="text"
							class="form-control">
					</div>
					<div class="col-xs-3" style="text-align:center;">
						<button type="button" class="btn btn-primary" id="search">
							<i class="am-icon-search"></i> 查询
						</button>
					</div>
				</form>
			</div>
		</div>

		<div id="operatediv"
			style="height:7%;width:100%;position: absolute;top:90px;left:15px">
			<button id="refrsh" class="am-btn am-btn-primary am-btn-xs"
				onclick="history.go(0)" type="button">
				<i class="glyphicon glyphicon-refresh"></i>刷新
			</button>
			<button id="edit" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="am-icon-pencil"></i>修改
			</button>
			<button id="delete" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="glyphicon glyphicon-remove"></i>删除
			</button>
			<button id="export" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="am-icon-download"></i>导出
			</button>
		</div>
		<div id="tablediv"
			style="height:70%;width:100%;position: absolute;top:140px;left:15px">
			<table class="layui-table" id="" border="1px">

				<thead>
					<tr>
						<th width="5px"><input id='allid' type='checkbox'></th>
						<th>编号</th>
						<th>茶名</th>
						<th>耗时</th>
						<th>操作人</th>
						<th>时间</th>
					</tr>
				<tbody id="table">
				</tbody>
			</table>
			<div id="page" style="text-align:center"></div>
		</div>


	</div>
</body>
<script type="text/javascript">
$("#export").click(function() {

	var myurl = "${pageContext.request.contextPath}/rn/export";
	var form = $("<form>");
	form.attr("style", "display:none");
	form.attr("method", "post");
	form.attr("action", myurl);
	$("body").append(form);
	form.submit();
});
	$(document).ready(function() {

		//ajax请求后台数据
		getlist();
		//点击搜索时 搜索数据
		$("#search").click(function() {
			getlist();
			currentPageAllAppoint = 1; //当点击搜索的时候，应该回到第一页
			toPage();//然后进行分页的初始化

		})
		toPage();
	});

	//分页参数设置 这些全局变量关系到分页的功能
	var startAllAppoint = 0;//开始页数
	var limitAllAppoint = 8;//每页显示数据条数
	var currentPageAllAppoint = 1;//当前页数
	var dataLength = 0;//数据总条数
	//ajax请求后台数据
	function getlist() {
		$.ajax({
			type : "post",
			async : false,
			dataType : "json",
			url : "${pageContext.request.contextPath}/rn/list?start="
					+ startAllAppoint + "&limit=" + limitAllAppoint,
			data : $("#searchform").serialize(),
			success : function(data, status) {
				gettable(data.root);
				startAllAppoint = data.currentResult;//当前页数(后台返回)
				dataLength = data.total;//数据总条数
			}
		});

	}
	function gettable(data) {
		var s = "";
		$
				.each(
						data,
						function(v, o) {
							s += "<tr><td><input  type='checkbox' value="+o.operateRnid +" /></td>";
							s += "<td>" + o.operateRnid + "</td>";
							s += "<td>" + o.warehouseteax.warehouseTeaname
									+ "</td>";
							s += "<td>" + o.operateTotaltime + "</td>";

							s += "<td>" + o.user.userName + "</td>";
							s += "<td>" + o.operateTime + "</td>";
						});
		if (data.length > 0) {
			$("#page").show();
			$("#table").html(s);
		} else {
			$("#page").hide();
			$("#table")
					.html(
							"<br/><span style='width:10%;height:30px;display:block;margin:0 auto;'>暂无数据</span>");
		}

	}

	function toPage() {

		layui
				.use(
						[ 'form', 'laypage', 'layedit', 'layer', 'laydate' ],
						function() {
							var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate, laypage = layui.laypage;

							var nums = 10;
							//调用分页
							laypage.render({
								elem : 'page',
								count : dataLength //这个是后台返回的数据的总条数
								,
								limit : limitAllAppoint //每页显示的数据的条数,layui会根据count，limit进行分页的计算
								,
								curr : currentPageAllAppoint,
								skip : true,
								jump : function(obj, first) {

									currentPageAllAppoint = obj.curr;
									startAllAppoint = (obj.curr - 1)
											* obj.limit;
									//document.getElementById('biuuu_city_list').innerHTML = render(obj, obj.curr);
									if (!first) { //一定要加此判断，否则初始时会无限刷新
										getlist();//一定要把翻页的ajax请求放到这里，不然会请求两次。
										//location.href = '?page='+obj.curr;
									}
								}
							});

						});
	};

	var isCheckAll = false;
	$("#allid").click(function() {
		if (!isCheckAll) {
			$("input[type='checkbox']").each(function() {
				$("input[type='checkbox']").prop("checked", true);

			});
			isCheckAll = true;
		} else {
			$("input[type='checkbox']").each(function() {
				$("input[type='checkbox']").prop("checked", false);
				isCheckAll = false;
			});
		}
	});

	$("#id").click(function() {
		if ($(this).is(':checked')) {
		} else {
			isCheckAll = false;
			$("#allid").prop("checked", false);
		}
	});
</script>
<script type="text/javascript">
	layui.use([ 'layer', 'table', 'laypage' ], function() {
		var layer = layui.layer //获得layer模块
		, table = layui.table, page = layui.laypage; //获得laypage模块

		//加工
		$("#edit").click(function() {
			var len = 0;
			var id = 0;
			$.each($('input:checkbox:checked'), function() {
				// alert($('input[type=checkbox]:checked').length+","+$(this).val());
				len = $('input[type=checkbox]:checked').length;
				id = $(this).val();
			});
			if (len > 1 || len < 1) {
				layer.open({
					title : '修改',
					content : '请选择一条数据'
				});
			} else {

				layer.open({
					type : 2,
					title : '揉捻修改',
					content : [ 'edit?id=' + id, 'no' ],
					area : [ '500px', '400px' ],
					end : function() {
						location.reload();
					}
				});
			}
		});
		
		$("#delete").click(function(){
			var len = 0;
			var id = 0;
			$.each($('input:checkbox:checked'), function() {
				// alert($('input[type=checkbox]:checked').length+","+$(this).val());
				len = $('input[type=checkbox]:checked').length;
				id = $(this).val();
			});
			if (len > 1 || len < 1) {
				layer.open({
					title : '删除',
					content : '请选择一条数据'
				});
			} else {
				layer.open({
					title:'删除数据',
					content:'确认删除数据？',
					btn:['确认','取消'],
					yes:function(index,layero){
						$.ajax({
							type:"post",
							url:"${pageContext.request.contextPath}/rn/delete",
							data:{id:id},
							dataType:"text",
							traditional: true,//这里设为true就可以了
							success:function(res){
								if(res=="success"){
									layer.alert('数据删除成功', {
										skin : 'layui-layer-molv' //样式类名
										,
										closeBtn : 0,
										end:function(){
											location.reload();
										}
									}, function() {
										layer.closeAll();
									});
								}else{
									layer.alert('数据删除失败', {
										skin : 'layui-layer-molv' //样式类名
										,
										closeBtn : 0
									}, function() {
										layer.closeAll();
									});
								}
							},
					
						});
					}
				});
			}
		});

	});
</script>


</html>

